<template>
  <Layout>
    <NavBar :rollback="false">所有标签</NavBar>
    <div class="tags">
      <router-link class="tag" v-for="tag in tagsList" :key="tag.id"
                   :to="`/labels/item/${tag.id}`">
        <span>{{ tag.tagName }}</span>
        <Icon :iconName="'right'"/>
      </router-link>
    </div>
    <Button @click.native="addTag">新增标签</Button>
  </Layout>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';

@Component({
  computed: {
    tagsList() {
      return this.$store.state.tagsList;
    }
  }
})

export default class Labels extends Vue {

  //添加标签
  addTag() {
    this.$store.commit('addTag');
    this.$store.commit('saveTagsList');
  }
}
</script>

<style lang="scss" scoped>


  .tags {
    padding-left: 16px;
    color: #333333;
    background-color: white;

    .tag {
      padding: 8px 0;
      border-bottom: 1px solid #c4c4c4;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .icon {
      width: 1em;
      height: 1em;
      margin-right: 12px;
    }
}

</style>